import {
  Comment,
  Like,
  View,
  Close,
  ShowCreativeImg,
  ShowLevelImg,
  ShowVipImg
} from '../icon'
import Image from 'next/image'
import vercel from '@/public/vercel.svg'
import { day, formatNum } from '@/util'

import type { I_Post, I_UserInfo } from '@/types/type'

export const Cart = ({ itemInfo }: Record<string, I_Post>) => {
  const { article_info, author_user_info, tags = [] } = itemInfo
  return (
    <section
      style={{ display: article_info ? 'flex' : 'none' }}
      className='cursor-pointer flex-col items-center px-3 pt-5'
    >
      <div className='w-full flex justify-between'>
        <div className='text-black text-opacity-50'>
          <span className='title relative text-black hover:text-blue-600 flex-shrink-0 text-sm mr-3'>
            <UserCart author_user_info={author_user_info} />
            <a href='' target='_blank'>
              {author_user_info?.user_name}
            </a>
          </span>
          <a
            href=''
            target='_blank'
            className='flex-shrink-0 text-sm before:inline-block before:bg-stone-300 before:w-px before:h-3 after:inline-block after:bg-stone-300 after:w-px after:h-3'
          >
            <span className='px-3'>
              {day(article_info?.ctime * 1000).fromNow()}
            </span>
          </a>
          <span className='px-1'>
            {tags.length
              ? tags.map((item, index) => (
                  <span key={index}>
                    <a
                      href=''
                      target='_blank'
                      className='hover:text-blue-600 flex-shrink-0 text-sm px-1'
                    >
                      {item.tag_name}
                    </a>
                    <span
                      style={{
                        display:
                          index === tags.length - 1 ? 'none' : 'inline-block'
                      }}
                    >
                      ·
                    </span>
                  </span>
                ))
              : null}
          </span>
        </div>
        <span className='w-4 h-4 hover:text-blue-600 flex-shrink-0 text-sm px-2'>
          <Close />
        </span>
      </div>
      <div className='border-b mt-1 pb-3 flex w-full'>
        <div className='left flex-grow'>
          <a
            href={`/post/${article_info?.article_id}`}
            target='_blank'
            rel='noopener'
          >
            <h2
              title={article_info?.title}
              className='fs text-base w-full one mb-2'
            >
              <strong>{article_info?.title}</strong>
            </h2>
            <p className='one text-sm text-gray-500 mb-2'>
              {article_info?.brief_content}
            </p>
          </a>
          <ul className='flex items-center text-gray-500'>
            <li className='mr-5 flex-shrink-0 text-sm flex items-center'>
              <View />
              <span className='ml-1'>
                {article_info?.view_count === 0
                  ? '查看'
                  : formatNum(article_info?.view_count)}
              </span>
            </li>
            <li className='mr-5 flex-shrink-0 text-sm hover:text-blue-600 flex items-center'>
              <Like />
              <span className='ml-1'>
                {article_info?.digg_count === 0
                  ? '点赞'
                  : formatNum(article_info?.digg_count)}
              </span>
            </li>
            <li className='mr-5 flex-shrink-0 text-sm hover:text-blue-600 flex items-center'>
              <Comment />
              <span className='ml-1'>
                {article_info?.comment_count === 0
                  ? '评论'
                  : formatNum(article_info?.comment_count)}
              </span>
            </li>
          </ul>
        </div>
        {article_info?.cover_image ? (
          <Image
            loader={() => `${article_info?.cover_image}?w=180&q=75`}
            src={vercel}
            alt=''
            className='right flex-auto w-28 h-20 rounded-sm ml-6 object-cover'
          />
        ) : null}
      </div>
    </section>
  )
}

function UserCart({ author_user_info }: Record<string, I_UserInfo>) {
  return (
    <div className='pb-3 user-card hidden absolute bottom-full left-0'>
      <div className='shadow-md bg-white w-80 p-5 pb-0 rounded-md'>
        <header className='header flex w-full overflow-hidden'>
          <Image
            loader={() => `${author_user_info?.avatar_large}?w=60&q=55`}
            src={vercel}
            alt='用户头像'
            width={50}
            height={50}
            className='flex-auto rounded-full mr-2 object-cover'
          />
          <div className='flex-1'>
            <div className='one'>
              <strong>{author_user_info?.user_name}</strong>
              <ShowCreativeImg
                level={author_user_info?.user_growth_info.jpower_level}
              />
              <ShowLevelImg
                level={author_user_info?.user_growth_info?.jscore_level}
              />
              <ShowVipImg
                level={author_user_info?.user_growth_info?.vip_level}
              />
            </div>
            <p className='mt-3 text-xs one text-neutral-400 break-words'>
              {author_user_info?.description}
            </p>
          </div>
        </header>
        <section className='border-b py-4 flex justify-between'>
          <button className='py-2 flex-1 rounded-md bg-blue-600 text-white'>
            关注
          </button>
          <span className='w-4'></span>
          <button className='py-2 flex-1 border border-blue-400 text-blue-400 bg-blue-50 rounded-md'>
            私信
          </button>
        </section>
        <footer className='py-3 flex justify-around text-stone-400'>
          <div className='text-center'>
            <span className='block text-center'>
              {author_user_info?.followee_count}
            </span>
            <span>关注</span>
          </div>
          <div className='text-center'>
            <span className='block text-center'>
              {author_user_info?.follower_count}
            </span>
            <span>粉丝</span>
          </div>
        </footer>
      </div>
    </div>
  )
}
